<div class="pm_modal {{ctrl.class}}" role="dialog" style="display: block;">

    <form
        class="modal-dialog"
        id="addUserModal"
        name="memberForm"
        ng-submit="memberForm.$valid && ctrl.submit()"
        novalidate>
        <button type="button" ng-click="ctrl.cancel()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>

        <div class="modal-content pm_form">
            <div class="modal-header">
                <h4 class="modal-title" ng-if="!ctrl.ID" translate-context="Title" translate>Create user</h4>
                <h4 class="modal-title" ng-if="ctrl.ID" translate-context="Title" translate>Update user</h4>
            </div>

            <div class="modal-body">
                <div class="pm_grid">
                    <div class="col-1-3">
                        <label translate translate-context="Label">Name</label>
                    </div>
                    <div class="col-1-3">
                        <input
                            autofocus
                            type="text"
                            ng-model="ctrl.name"
                            placeholder-translate="ex: Thomas Anderson"
                            placeholder-translate-context="Exemple name for the user"
                            required>
                    </div>
                    <div class="col-1-3" ng-if="!ctrl.ID">
                        <label>
                            <custom-checkbox data-custom-ng-model="ctrl.private"></custom-checkbox>
                            <span translate translate-context="Action" translate-comment="Form checkbox option">Private</span>
                            <i class="fa fa-info-circle" pt-tooltip-translate-context="Information about this user" pt-tooltip-translate="Organization administrators cannot access the messages of private users."></i>
                        </label>
                    </div>
                </div>
                <div class="pm_grid" ng-if="ctrl.showKeys && !ctrl.private">
                    <div class="col-1-3">
                        <label translate translate-context="Label">Key Strength</label>
                    </div>
                    <div class="col-1-3">
                        <label class="checkbox">
                            <custom-radio
                                data-custom-ng-model="ctrl.size"
                                data-custom-value="RSA2048"></custom-radio>
                            <strong translate translate-context="Label" translate-comment="form option heading">High security</strong> <small>(2048-bit)</small>
                        </label>
                    </div>
                    <div class="col-1-3">
                        <label class="checkbox">
                            <custom-radio
                                data-custom-ng-model="ctrl.size"
                                data-custom-value="RSA4096"
                                data-custom-ng-disabled="ctrl.process"></custom-radio>
                            <strong translate translate-context="Label" translate-comment="form option heading">Highest security</strong> <small>(4096-bit)</small>
                        </label>
                    </div>
                </div>
                <div class="pm_grid" ng-if="!ctrl.ID || ctrl.showKeys">
                    <div class="col-1-3">
                        <label translate translate-context="Label">Password</label>
                    </div>
                    <div class="col-1-3">
                        <password data-value="ctrl.temporaryPassword" data-name="newPassword" form="memberForm"
                        placeholder-translate-context="Placeholder"
                        placeholder-translate="Password"></password>
                    </div>
                    <div class="col-1-3">
                        <password data-value="ctrl.confirmPassword" data-name="confirmPassword" form="memberForm" placeholder-translate="Confirm Password" placeholder-translate-context="Placeholder" compare="ctrl.temporaryPassword"></password>
                    </div>
                </div>
                <div class="pm_grid" ng-if="ctrl.showAddress">
                    <div class="col-1-3">
                        <label translate translate-context="Label">Address</label>
                    </div>
                    <div class="col-1-3">
                        <input type="text" ng-model="ctrl.address" placeholder-translate="Address" placeholder-translate-context="Tooltip" required />
                    </div>
                    <div class="col-1-3" ng-if="ctrl.domains.length === 1">
                        <label>@{{ ctrl.domain.DomainName }}</label>
                    </div>
                    <div class="col-1-3" ng-if="ctrl.domains.length > 1">
                        <span class="pm_select">
                            <select ng-model="ctrl.domain" ng-options="'@'+domain.DomainName for domain in ctrl.domains"></select>
                            <i class="fa fa-angle-down"></i>
                        </span>
                    </div>
                </div>
                <div class="pm_grid padding-top">
                    <div class="col-1-3">
                        <label translate translate-context="Label">Account storage</label>
                    </div>
                    <div class="col-2-3">
                        <label class="bold">{{ ctrl.storageSliderValue * ctrl.unit | humanSize  }}</label>
                        <slider value="ctrl.storageSliderValue" options="ctrl.storageSliderOptions"></slider>
                        <legends list="ctrl.storageLegends"></legends>
                    </div>
                </div>
                <div class="pm_grid padding-top" ng-if="::ctrl.hasVPN">
                    <div class="col-1-3">
                        <label>
                            <span translate-context="Label" translate>VPN Connections</span>
                            <a target="_blank" class="text-purple" href="https://protonmail.com/support/knowledge-base/vpn-connections/">
                                <i class="fa fa-info-circle"></i>
                            </a>
                        </label>
                    </div>
                    <div class="col-2-3">
                        <label class="bold">{{ ctrl.vpnSliderValue | number:0 }}</label>
                        <slider value="ctrl.vpnSliderValue" options="ctrl.vpnSliderOptions"></slider>
                        <legends list="ctrl.vpnLegends"></legends>
                    </div>
                </div>
                <p ng-if="ctrl.showKeys && !ctrl.private" class="alert alert-warning" translate translate-context="Info"> 4096-bit keys only work on high performance computers. For most users, we recommend using 2048-bit keys. Clicking <strong>Save</strong> will generate encryption keys and may freeze ProtonMail for several minutes</p>
                <p class="alert alert-info" ng-if="!ctrl.ID" translate translate-context="Info">Please give the address and temporary password to the new member so they can log in.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="pm_button modal-footer-button disabled-if-network-activity" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button type="submit" class="pm_button primary modal-footer-button disabled-if-network-activity" ng-disabled="memberForm.$invalid" translate translate-context="Action">Save</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
